import { useEffect, useState } from 'react'
import { View, Map, Navigator, Text, Swiper, SwiperItem } from '@tarojs/components'
import Taro, { getCurrentInstance, useReady } from '@tarojs/taro'

import './index.scss'
import markIcon from '@/assets/images/mark.png'
import XImage from '@/components/XImage'
import Http from '@/http'
import GlobalData from '@/global'

export default () => {
    useReady(() => {
      waitLogin()

    })

    let changeMapInter:any = null
    let _originLocation = [114.014536, 22.561585]

    let [centerLocation, setCenterLocation] = useState([..._originLocation])
    useEffect(() => {
      Taro.getLocation({
        type : 'wgs84',
        success(res) {
          setCenterLocation([res.longitude, res.latitude])
        }
      })
    }, []);

    let [deviceList, setDeviceList] = useState([
      { id : 1, longitude : 114.014536, latitude : 22.561585, iconPath : markIcon, width : 36, height : 41 }
    ])


    function waitLogin() {
      if(!GlobalData.isLogin) {
        setTimeout(() => {
          console.log('等待登录')
          waitLogin()
        }, 1000)

        return
      }


      const $instance = getCurrentInstance()
      let q = $instance.router?.params.q
      if(q) { //从二维码跳进来
        q = decodeURIComponent(q)
      }
    }


    function mapChange(e){
      if(e.type == 'end') { //结束的
        if(changeMapInter != null) {
          clearTimeout(changeMapInter)
        }

        changeMapInter = setTimeout(() => {
            let location = e.detail.centerLocation
            console.log(location)
            console.log('获取附近设备')
          }, 2000)
        
      }
    }

    async function getNearDeviceList(longitude:number, latitude:number) {
      setDeviceList([])

      let { data } = await (new Http()).get('device/near', { longitude, latitude })
      if(data && data.length > 0) {
        setDeviceList(data)
      }
    }

    function ff(){
      Http.get('index/nearDeivce')
    }

  return (
    <>
      <Map className='vh-100 w-100' optimize longitude={114.014536} latitude={22.561585} show-location showCompass={false} />
      <View className='left-controls'>
          <Navigator hoverClass='none' url='' className='item'>
            <XImage className='icon xy' src='search.png'></XImage>
          </Navigator>
          <View className='item m-t-20'>
            <XImage className='icon xy' src='origin.png'></XImage>
          </View>
        </View>

        <View className='device-detail p-l-r'>
          <Swiper>
            <SwiperItem>
              <View className='wrap relative'>
                <Navigator url='/pages/charge/index' hover-class='none'>
                  <View className='site-name'>西头新村</View>
                  <View className='color-999 m-t-10'>北京西路东南街18号</View>
                  <View className='m-t-10'>
                    设备数量：<Text className='color-0265ff'>10台</Text>
                    <Text className='m-l-20'>空闲插座：<Text className='color-0ab885'>10个</Text></Text>
                  </View>
                </Navigator>
                <View className='navigation middle text-center'>
                  <XImage className='nav-icon' src='navigation.png'></XImage>
                  <View className='color-999 m-t-10 f-24'>距离约10KM</View>
                </View>
              </View>
            </SwiperItem>
          </Swiper>
        </View>
    </>
      
  )
}